<template>
<div class="particulars">
    <headers heatle=""></headers>
   <div class="particulars_content" ref="particulars_scroll">
      <div class="scroll_content" ref="particulars_content">
        <div class="particulars_top">
          <img :src="URL+particulardata.bookimg" alt="">
          <p>{{particulardata.videoduration}}</p>
          <h5 @click="users(userid)">解读人：{{name}}</h5>
          <p>{{particulardata.bookrecommend}} </p>
        </div>

        <div v-html="particulardata.content"></div>

        <div class="youlove">
          <h4>猜你喜欢</h4>
          <div class="youlove_book" v-for="obj in bookrecommendList" @click="particulars(obj.bookid)">
            <img :src="URL+obj.bookimg" alt="">
            <div>
              <h6>{{obj.bookname}}</h6>
              <p>{{obj.bookrecommend}}</p>
              <span>{{obj.videoduration}} <b>￥{{obj.bookprice}}</b></span>
            </div>
          </div>
        </div>
      <comment></comment>



      </div>

  </div>

</div>
</template>

<script>
  import BScroll from 'better-scroll'
  import allLsit from "@/components/allLsit";
  import headers from "@/components/headers";
  import comment from "@/components/comment";
    export default {
        name: "particulars",
      data(){
          return{
            particulardata:[],//全部数据
            bookrecommendList:[],// 猜你喜欢
            name:[],//作者
            userid:[],//作者ID
            scrolly:'',
            scrollx:'',
          }
      },
      components:{
        allLsit,
        headers,
        comment
      },
      mounted(){

          //   this.renders()
          // function renders(id) {
            let  date = new Date().getTime() //获取当前时间戳
            var obj ={bookid :this.$route.params.id,channel:'weixin',timestamp:date,token :0}
            var sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
            var url = 'https://testapi.readerday.com/v3/product/book/detail/0/'+sign +'/' + date +'/'+ this.$route.params.id + '/weixin'

            this.$axios.get(url)
              .then((res)=>{
                this.particulardata=[]
                this.particulardata=res.data.data
                this.name=res.data.data.copywriteInfo.nickname
                this.userid=res.data.data.copywriteInfo.userid
                this.bookrecommendList=res.data.data.recommendList
              })
          // }


          if (!this.scrolly) {
            this.scrolly = new BScroll(this.$refs.particulars_scroll, {scrollY: true,click: true, })
          } else {
            this.scrolly.refresh()
          }



      },
      methods:{
          users(id){
            console.log(id)
          },
        particulars(id){
          let  date = new Date().getTime() //获取当前时间戳
          var obj ={bookid :id,channel:'weixin',timestamp:date,token :0}
          var sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
          var url = 'https://testapi.readerday.com/v3/product/book/detail/0/'+sign +'/' + date +'/'+ id + '/weixin'

          this.$axios.get(url)
            .then((res)=>{
              this.particulardata=[]
              this.particulardata=res.data.data
              this.name=res.data.data.copywriteInfo.nickname
              this.userid=res.data.data.copywriteInfo.userid
              this.bookrecommendList=res.data.data.recommendList
            })
        }
      }
    }
</script>

<style scoped>
   .particulars {
    width: 100%;
    height:100%;
     background: #eee;
     display: flex;
     display: -webkit-flex;
     flex-direction:column;
     -webkit-flex-direction:column;
     align-items: stretch;
     -webkit-align-items:stretch;
  }
   .particulars_content{
     flex:1;
     -webkit-flex: 1;
     overflow: hidden;
     padding: 0 .1rem;
   }

  .particulars_top > img{
    width: .8rem;
    height: 1.1rem;
    margin: .1rem auto 0;

  }

  .particulars_name img{
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    float: left;
    margin-right: .2rem;
  }
  .particulars_name div{
    -webkit-flex: 1;
    text-align: left;
  }
  .particulars_name div p{
    width: 100%;
  }


   .youlove>h4{
     margin-bottom: .15rem;
     font-weight: bold;
     text-align: left;
     font-size: .18rem;
   }
   .youlove_book{
     padding: 0  0.08rem;
     font-size: .12rem;
     text-align: left;
     margin-bottom: .1rem;
   }
   .youlove_book img{
     height: 1.1rem;
     width: .85rem;
     float: left;
     margin-right: .1rem;
   }
   .youlove_book h6{
     font-size: .14rem;
     margin-bottom: .05rem;
   }
   .youlove_book p{
     height: .7rem;
   }
   .youlove_book span b{
     float: right;
     margin-right: .1rem;
     color: firebrick;
   }


</style>
